<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>notebook</title>

    <script src="../public/vue/dist/vue.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="../public/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="../public/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="../public/bootstrap/dist/js/bootstrap.min.js"></script>


    <link rel="stylesheet" href="../public/summernote/dist/summernote.css">
    <!-- <link rel="stylesheet" href="../public/summernote/dist/summernote-bs4.css"> -->

    <script src="../public/summernote/dist/summernote.js"></script>
    <script src="../public/summernote/dist/lang/summernote-zh-CN.js"></script>


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>



    <div class="container" style="margin:20px auto;" id="enoteApp">

        <div class="row">



            <!-- search panel stat -->
            <div class="panel panel-info">

                <div class="panel-body">
                    <form class="navbar-form navbar-right">

                        <div class="form-group">
                            <label for="" class="control-label">名称</label>
                            <div class="input-group">
                                <input type="text" v-model="enoteSearchForm.sname" class="form-control">
                            </div>
                        </div>
                        <button type="button" @click="queryEnote" class="btn btn-primary">搜索</button>
                    </form>
                </div>
            </div>
            <!-- search panel ends -->

            <button type="button" @click="fnShowAddModel" class="btn btn-success">add</button>

            <div class=" pull-right">

                <ul class="pagination">

                    <button type="button" @click="fnLastPage" class="btn btn-link"><i class="glyphicon glyphicon-chevron-left"></i></button>

                    <input type="number" style="width: 50px;" v-model="page" @change="queryEnote" min="1" :max="pages">
                    / {{pages}}

                    <!-- <li v-for="n in pages">
                            <button type="button" @click="fnPageChange(n)" class="btn btn-link">{{n}}</button>
                        </li> -->
                    <button type="button" @click="fnNextPage" class="btn btn-link"><i class="glyphicon glyphicon-chevron-right"></i></button>
                </ul>

            </div>

            <table class="table table-condensed table-bordered">
                <thead>
                    <tr>
                        <th>sname</th>
                        <th>简介</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in articleList" :key="index">
                        <td>

                            <button type="button" @click="fnShowDetail(item)" class="btn btn-link">{{item.sname}}</button>

                        </td>

                        <td>{{item.snote}}</td>
                        <td>{{item.ctime}}</td>
                        <td>

                            <button type="button" @click="fnOpenUpdateModal(item)" class="btn btn-primary">修改</button>
                            <!-- <button type="button" @click="fnDeleteModal(item)" class="btn btn-danger">delete</button> -->

                        </td>
                    </tr>
                </tbody>
            </table>





        </div>

        <!-- add  article  -->

        <!-- 模态框（Modal） -->
        <div class="modal fade  bs-example-modal-lg" id="addEnoteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">提示</h4>
                    </div>
                    <div class="modal-body">


                        <form class="navbar-form pull-right">
                            <button type="button" @click="fnAddEnote" class="btn btn-link">保存</button>
                        </form>


                        <div class="clearfix">

                        </div>
                        <form role="form">
                            <div class="form-group" v-show="false">
                                <label>_id</label>
                                <input type="text" name="" id="input" class="form-control" v-model="enoteForm._id">
                            </div>
                            <div class="form-group">
                                <label>名字</label>
                                <input type="text" name="" id="input" class="form-control" v-model="enoteForm.sname">
                            </div>
                            <div class="form-group">
                                <label>简介</label>
                                <textarea id="summernote1" v-model="enoteForm.snote" class="form-control" rows="10"></textarea>

                            </div>

                        </form>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" @click="fnAddEnote" class="btn btn-primary">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->


    </div>

</body>

</html>

<script>
    var vm = new Vue({
        el: '#enoteApp',
        data: {
            noteBookForm: {},
            articleList: [],
            enoteSearchForm: {

            },
            cateSelect: {},
            enoteForm: {

            },
            total: 0,
            page: 1,
        },
        computed: {

            pages() {
                return Math.ceil(this.total / 10);
            }
        },
        methods: {


            fnShowAddModel() {

                this.enoteForm = {};

                // Vue.set(this.enoteForm, 'cateName', node.text);
                $('#addEnoteModal').modal('show');
            },

            fnOpenUpdateModal(item) {

                window.open('edetail.html?_id=' + item._id);
            },


            getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },

            fnAddEnote(obj) {

                obj = this.enoteForm;
                var _self = this;

                var postUrl = '../enotes/add';
                // if (cate.id) {
                //     postUrl = '../walleCate/update'
                // }
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: obj,
                    dataType: "json",
                    success: function (response) {
                        _self.queryEnote();
                        $('#addEnoteModal').modal('hide');

                    }
                });

            },

            fnUpdateCate(cate) {

                cate = cate || this.noteBookForm;
                var _self = this;

                var postUrl = '../walleCates/update';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: cate,
                    dataType: "json",
                    success: function (response) {

                        // if (response.code == 0) {

                        //     // _self.sysConfig = response.dat;
                        //     // _self.queryCate();
                        // }

                    }
                });

            },
            fnDeleteCate(cate) {

                console.log('delete', cate);
                cate = cate || this.noteBookForm;
                var _self = this;

                var postUrl = '../walleCates/delete';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: { id: cate.id },
                    dataType: "json",
                    success: function (response) {

                        // if (response.code == 0) {

                        //     // _self.sysConfig = response.dat;
                        //     // _self.queryCate();
                        // }

                    }
                });

            },


            fnLastPage() {

                if (this.page > this.pages) {

                    var n = this.pages;
                    this.fnPageChange(n);
                }
                if (this.page > 1) {

                    var n = this.page - 1;
                    this.fnPageChange(n);
                }
            },

            fnNextPage() {

                if (this.page > this.pages) {

                    var n = this.pages;
                    this.fnPageChange(n);
                }
                if (this.page < this.pages) {

                    var n = this.page + 1;
                    this.fnPageChange(n);
                }
            },

            fnPageChange(n) {

                this.page = n;
                this.queryEnote();

            },
            queryEnote: function () {

                var _self = this;

                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "../enotes/",
                    // data: {
                    //     _id: _id
                    // },
                    data: _self.enoteSearchForm,
                    dataType: "json",
                    success: function (response) {
                        console.log(response);
                        if (response.code == 0) {

                            var dat = response.dat;
                            _self.articleList = dat.records;
                            _self.total = dat.total;
                        }

                    }
                });
            },

        },
        mounted: function () {

            // this.queryCate();
            this.queryEnote();

        }
    })
</script>